<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">通讯录</block>
			<block slot="right">
				<uni-icons type="email" color="#ffffff" size="25" @click="goMessage" />
			</block>
		</cu-custom>
		<view class="search-bar">
			<uni-search-bar @confirm="search" @input="input" @cancel="cancel" clearButton="none" />
		</view>
		<scroll-view>
			<view class="heder-container">正安县第三中学</view>
			<uni-collapse ref="add" class="warp">
				<uni-collapse-item v-for="(item, i) in list" :key="i" :open="item.open" :show-animation="item.showAnimation"
				 :disabled="item.disabled" :title="item.name">
					<view class="cell-container" v-for="(sub, j) in item.content" :key="j">
						<view class="cell-container-sub">
							<text class="text">{{sub.subName}}</text>
							<text class="text">{{sub.phone}}</text>
							<uni-icons class="icon" type="phone" color="007aff" size="20" @click="callPhone(sub.phone)" />
							<uni-icons class="icon" type="chatbubble" color="007aff" size="20" @click="singleChat(sub.id)" />
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
			<switch class="sm" @change="SetSize"></switch>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {},
		data() {
			const listData = [{
					type: false,
					name: '行政组',
					open: true,
					content: [{
							subName: '爱仕达',
							phone: '18285211301'
						},
						{
							subName: '电风扇',
							phone: '18285454001'
						},
						{
							subName: '史蒂夫',
							phone: '18285211001'
						},
						{
							subName: '快捷键',
							phone: '18245110013'
						},
					]
				},
				{
					type: false,
					name: '后勤',
					content: [{
						subName: '快捷键',
						phone: '18245110013'
					}, ]
				},
				{
					type: false,
					name: '语文组',
					// disabled: true,
					content: [{
							subName: '电风扇',
							phone: '18285454001'
						},
						{
							subName: '史蒂夫',
							phone: '18285211001'
						},
						{
							subName: '快捷键',
							phone: '18245110013'
						},
					]
				},
				{
					type: false,
					name: '数学组',
					// disabled: true,
					content: [{
							subName: '爱仕达',
							phone: '18285211301'
						},
						{
							subName: '电风扇',
							phone: '18285454001'
						},
						{
							subName: '史蒂夫',
							phone: '18285211001'
						},
						{
							subName: '快捷键',
							phone: '18245110013'
						},
					]
				},
				{
					type: false,
					name: '生化组',
					// disabled: true,
					content: [{
							subName: '爱仕达',
							phone: '18285211301'
						},
						{
							subName: '电风扇',
							phone: '18285454001'
						},
						{
							subName: '史蒂夫',
							phone: '18285211001'
						},
						{
							subName: '快捷键',
							phone: '18245110013'
						},
					]
				},
				{
					type: false,
					name: '体艺组',
					// disabled: true,
					content: [{
							subName: '爱仕达',
							phone: '18285211301'
						},
						{
							subName: '电风扇',
							phone: '18285454001'
						},
						{
							subName: '史蒂夫',
							phone: '18285211001'
						},
						{
							subName: '快捷键',
							phone: '18245110013'
						},
					]
				}
			]
			return {
				searchVal: '',
				size: false,
				list: listData,
				accordion: [{
						id: 0,
						title: '标题文字',
						content: '手风琴效果',
						animation: true
					},
					{
						id: 1,
						title: '标题文字',
						content: '手风琴效果',
						animation: true
					},
					{
						id: 2,
						title: '标题文字',
						content: '手风琴效果',
						animation: true
					}
				],
				extraIcon: {
					color: '#4cd964',
					size: '26',
					type: 'image'
				},
				id: 2
			}
		},
		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				this.searchVal = res.value
				console.log(res.value)
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			callPhone(phone) {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: phone,

					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},

					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}

				});
			},
			singleChat(id) {
				uni.navigateTo({
					url: "single_chat/single_chat",
				})
			},
			change(e) {},
			SetSize(e) {
				this.size = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
	.uni-icons {
		margin-right: 10px;
	}
	.search-bar-container {
		display: flex;
		position: relative;
		background-color: #007AFF;
		height: 50px;
	}

	.search-bar {
		width: 100%;
		position: sticky;
		z-index: 1;
		top: 0;
		left: 0;
		right: 0;
		// bottom: 0;

	}

	.heder-container {
		font-size: 16px;
		padding: 5px 10px;
		background-color: #F8F8F8;
		border: #e5e5e5 1px solid;
	}

	.cell-container {
		display: flex;
		padding: 0 10px;
		background-color: #FDFDFD;

		.cell-container-sub {
			padding: 5px 15px;
			display: flex;
			width: 100%;
			flex-direction: row;
			border-color: #e5e5e5;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			align-items: center;

			.text {
				flex: 1;
				// color: #007AFF;
				font-size: 14px;
			}

			.icon {
				margin-left: 10px;
				color: #007aff;
				height: 36px;
				width: 36px;
				border-color: #e5e5e5;
				border-width: 1px;
				border-style: solid;
				border-radius: 18px;
			}

			.icon:active {
				background-color: #f1f1f1;
			}
		}


	}


	.sm {
		padding: 10px;
		transform: scale(0.7, 0.7);
		/* background-color: #09BB07; */
	}
</style>
